import Vue from 'vue'

import 'normalize.css/normalize.css' // 重置页面元素的 margin、padding 等值

// 导入 Element 以及 CSS 文件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// element 中解决多语言问题的插件
// import locale from 'element-ui/lib/locale/lang/en'

import '@/styles/index.scss' // 全局的 css 文件

// console.log(process.env.VUE_APP_NUM)

// 项目的根组件
import App from './App'
// 一般 store 文件夹作用：就是用来存放 Vuex(状态) 代码
import store from './store'
// 路由
import router from './router'

import '@/icons' // 导入图标文件
import '@/permission' // 这个文件是用来做权限认证的(权限管理、路由守卫)

/**
 * Mock 是模拟、伪造数据使用 Vue3
 */
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// set ElementUI lang to EN
// 设置 element Ui 默认的语言是英语 en(英文) zh(中文)
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  // 指将跟组件以及页面组件打包，打包以后放置到 id 为 app 的 div 中进行展示
  el: '#app', // el 这个属性值一般是一个元素，含义：是指将打包的好的资源挂载(放置)到哪一个位置
  router,
  store,
  render: h => h(App)
})

// 学习代码的套路:
// 听->懂20%
// 读->懂40%
// 仿->懂60%
// 写->懂80%
// 讲->懂100% (你能给别人讲明白)

// 写代码->套路(成长之路)
// 1. 思路(跟代码无关, 你知道要做什么/要什么/页面效果如何) -> 退出登录要干什么?
// 2. 编码(把思路一个个转成代码实现) -> (多仿写代码多练习多敲)
// 3. 改错(遇到问题找到问题原因, 解决问题)->(多思考多尝试, 多总结.md)

// 看别人代码:找东西方式↓
// 目标1: 快速找到页面对应的vue文件 (找页面 -> 看路由地址 -> 路由配置)
// 确定一下(定点破坏加点东西看看变不变)
// 目标2: 快速找到某个标签
// 用内容/class类名, 在vscode放大镜(全局代码搜索)
// 目标3: 如果上面找不到(用数据名字在代码里找不到)
// 就是网络请求回来的数据(动态渲染数据), 换一个内容/类名去找标签

// 写任何需求的万能模板: (1-4步)
// 明确需求和UI设计图
// 1. html+css(先布局)
// 2. ajax请求数据/固定数据/绑定数据(铺设页面)
// 3. js代码(交互)(难)(思路来源于画面, 代码来源于熟练)(注意: 一小步一小步实现)
// 4. 调用后台接口和后台交互

// 组件的套路
// 明确UI设计图, 知道要什么样子的组件
// 1. (找组件)去组件库文档, 找到最相似的组件
// 2. (用组件)相关代码都复制到自己的vue文件内
// 3. (读组件)读标签作用关系, 还有属性作用(多看文档的基础例子和下面的属性解释)
// 4. (删组件)把多余的不要的删除掉
// 5. (改组件)添加需要补充的属性/内容

// 登录->流程
// 1. Login/index.vue->触发登录点击事件
// 2. 执行vuex里user/loginAction方法(await 等待登录流程走完再往下执行)
// 3. Actions方法里->api/user.js里login接口方法
// 4. 把登录页面账号密码又接着传入->request.js里(用axios请求)
// 5. (先走request那请求拦截器里), return走完以后才调用内部原生ajax请求->(拼接baseURL拼接前缀)-> 去请求去了
// 6. 响应回来以后, 走response响应拦截器, 一层层往回去
// 7. 登录的那块await才放行, 走路由跳转和路由守卫

// 有的用ES6 有的用CommonJS规范
// src下代码和main.js入口产生直接/间接的引入关系, 都会被webpack打包翻译(import语法翻译掉)
// settings.js里用module.exports导出, 其他位置import导入settings.js
// https://segmentfault.com/a/1190000012386576
// webpack+babel, 会把ES6->ES5的代码(模块引入) (commonJS规范挂载到exports对象属性上)
